<!--
    @author: crissy-月下闲人
-->

<script lang="ts" setup>
interface CardInfo {
  title: string
  imgUrl: string
  desc: string
  tab: string
  price: number
}
const info: CardInfo = {
  title: '新客体验陪诊服务',
  imgUrl: '',
  desc: '描述信息',
  tab: '专业陪诊',
  price: 100,
}
</script>

<template>
  <view class="card">
    <image class="image" :src="info.imgUrl" />
    <text class="title">{{ info.title }}</text>
    <text class="desc">{{ info.desc }}</text>
    <text class="tab">{{ info.tab }}</text>
    <text class="price">￥{{ info.price }}</text>
    <button class="button">立即咨询</button>
  </view>
</template>

<style lang="scss" scoped>
.card {
  width: 100%;
  height: 300rpx;
  background: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  padding: 30rpx 30rpx;
  position: relative;
  display: flex;
  align-items: center;

  .image {
    width: 200rpx;
    height: 200rpx;
    border-radius: 20rpx;
    overflow: hidden;
    background: #eee;
  }

  .title {
    font-size: large;
    font-weight: bold;
    position: absolute;
    left: 260rpx;
    top: 40rpx;
  }

  .desc {
    position: absolute;
    left: 260rpx;
    top: 110rpx;
    color: #1abc9c;
  }

  .tab {
    position: absolute;
    left: 260rpx;
    top: 200rpx;
    font-size: 30rpx;
    color: #999;
  }

  .price {
    position: absolute;
    right: 50rpx;
    top: 90rpx;
    color: #f39c12;
    font-size: larger;
  }

  .button {
    position: absolute;
    right: 20rpx;
    top: 190rpx;
    background-color: #1abc9c;
    border-radius: 10rpx;
    font-size: 30rpx;
    color: #fff;
  }
}
</style>
